<template>
    <div class="dashboard-container">
      <!-- 筛选查询 -->
      <el-form :inline="true">
        <el-form-item label="时间范围：">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleChange"
            value-format="timestamp"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form>
  
      <!-- 数据 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column type="person.realName" label="用户">
            <template slot-scope="{row}">
                {{   row.user.nickName }} | {{row.user.province.name}}
            </template>
        </el-table-column>
        <el-table-column label="所属代理商">
            <template slot-scope="{row}">
                {{   row.user.host.nickName }}
            </template>
        </el-table-column>
        <el-table-column prop="data.totalCallCount" label="拨打次数"></el-table-column>
        <el-table-column prop="data.successCallCount" label="接通量"></el-table-column>
        <el-table-column prop="data.effectiveCallCount" label="有效通话数量"></el-table-column>
        <!-- <el-table-column prop="data.totalCallCount" label="客户数量"></el-table-column> -->
        <el-table-column label="通话时长">
          <template slot-scope="{row}">
              {{   row.data.totalCallDuration/1000 }} s
          </template>
        </el-table-column>
        <el-table-column label="平均时长">
          <template slot-scope="{row}">
              {{   row.data.averageCallDuration/1000 }} s
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleLook(row.user.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div style="padding-top:30px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex+1"
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageCount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { callGetlist, callGetRecordList } from '@/api/call'
  import { dataGetUserDataList } from '@/api/data'
  import { CAll_RESULT, OSS_BASE_URL } from '@/utils/common'
  import { transfromData } from '@/utils/tools'
  import moment from 'moment';
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        CAll_RESULT,
        OSS_BASE_URL,
        list: [],
        currentPage4: 1,
        params: {
          startTime: '',
          endTime: '',
          pageCount: 10,
          pageIndex: 0
        },
        total: 0,
        value: '',
        options: [],
        loading: false,
        dialogType: 'create',
        dialogVisible: false,
        provinceList: [],
        cityList: [],
        temp: {},
        rules: {
          loginName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        date: []
      }
    },
    mounted(){
      //通话列表
      this.getList();
    },
    methods:{
      handleLook(id){
        this.$router.history.push({ path: '/call/list?id=' + id })
      },
      handleChange(){
        console.log(this.date)
      },
      handleSearch(){
        this.params.pageIndex = 0;
        this.getList();
      },
      async getRecord(){
        let data = await callGetRecordList()
      },
      //执行搜索
      handleSearch(){
        this.params.pageIndex = 0;
        this.getList();
      },
      //获取数据列表
      async getList(){
        if(this.date&&this.date.length==2){
          this.params.startTime = this.date[0]
          this.params.endTime = this.date[1]
        }else{
          this.params.startTime = ''
          this.params.endTime = ''
        }
        this.loading = true;
        let data = await dataGetUserDataList(this.params)
        this.loading = false;
        this.list = data.data.list.map(item=>{
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          return item
        })
        this.total = data.data.totalCount;
      },
      //切换数量
      handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getList();
      },
      //切换页码
      handleCurrentChange(val){
        this.params.pageIndex = val-1;
        this.getList();
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .green{
    color: green;
  }
  .red{
    color: red;
  }
  </style>
  